<template lang="jade">
  div.view-wrapper
    el-card
      el-row(:gutter="20")
        el-col(:span="14")
          span.lbl-project.invisible *
        el-col(:span="4", style="text-align: right;")
          el-button(type="primary",@click="CreateRole")
            span.el-icon-plus 创建角色
        el-col(:span="6", style="text-align: right;")
          el-input(placeholder="查找角色")
            template(slot="append")
              span.el-icon-search
      div.divide-block
      el-row(:gutter="20")
        el-col(:span="24")
          el-table(border,stripe,:data="result",v-loading="loading" element-loading-text="获取数据中..."
          element-loading-spinner="el-icon-loading")
            el-table-column(align="center",label="序号",width="80",type="index")
            el-table-column(align="center",label="角色名称",prop="name")
            el-table-column(align="center",label="角色描述",prop="description")
            el-table-column(align="center",label="操作",width="90")
              template(scope="scope")
                el-button(type="primary",size="small",@click="EditRole(scope.row)")
                  span.el-icon-edit &nbsp;编辑
          table-pagination(:size-options="[10,25,50,100]",:data-total="searchParams.total")
</template>

<script>
  import roleApi from '@/api/role'
  import TablePagination from '@/components/TablePagination'
  export default {
    name: 'RoleSetting',
    components: {
      TablePagination
    },
    data: () => ({
      loading: false,
      result: [],
      searchParams: {
        limit: 10,
        page: 1,
        total: 0
      }
    }),
    mounted () {
      this.loading = true
      roleApi.getRoleList({
        type: 'admin'
      }).then(res => {
        this.loading = false
        if (res.data.data) {
          this.result = []
          res.data.data.forEach(item => {
            this.result.push(item)
          })
        }
      }, err => {
        this.loading = false
        this.$message({
          type: 'error',
          message: err.response.data.message
        })
      })
    },
    methods: {
      EditRole (data) {
        this.$router.push({ name: 'EditRole', params: { roleId: data.id } })
      },
      CreateRole () {
        this.$router.push({name: 'CreateRole'})
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .invisible{
    visibility: hidden;
  }
</style>
